<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>#{bundel.loan}</title>
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
    </h:head>
    <h:body>
        <ui:composition>
            <h:form>
               <script type="text/javascript">  
                   var doInitForm=false;
                   var tofocus;
                   
                   function changeFocus(nextfcs) {tofocus=nextfcs;}
                   function setDoInitForm(st) {doInitForm=st;}
                   function focusState(xhr, status, args) {  
                       if(args.validationFailed || !args.success) {}
                       else document.getElementById(tofocus).focus();
                       return false;
                   }
                                      
                   function handleCompleteSaving(xhr, status, args) {  
                        if(args.validationFailed || !args.success) {
                        }else setTimeout(function() {if (doInitForm==true) btnNewLoan.jq.click();}, 3000);
                    }
                    
                    function customRK(e, id, nextfcs) {
                      var code = (e.keyCode ? e.keyCode : e.which);
                       if(code==13) {
                            if (id=="loanCIF") rcloanGetCustomer();
                            else if (id=="loanDisbSaving") rcloanGetSaving();
                            else if (id=="loanAutodebSaving") rcloanGetAutodebSaving();
                               
                            tofocus=nextfcs;
                            e.preventDefault ? e.preventDefault() : e.returnValue = false;
                            e.stopPropagation();
                       }
                    }

                </script>  
               
                <p:remoteCommand name="rcloanGetCustomer" actionListener="#{loanBean.getLoanCustomer('null')}" 
                                 process="loanCIF @this" update="loancustIdHidden loanCustInfo" oncomplete="focusState(xhr, status, args);"/>
                
                <p:remoteCommand name="rcloanGetSaving" actionListener="#{loanBean.getDisbSaving('null')}" 
                                 process="loanDisbSaving @this" update="loanDisbSavingOwn" oncomplete="focusState(xhr, status, args);"/>
                
                <p:remoteCommand name="rcloanGetAutodebSaving" actionListener="#{loanBean.getAutodebitSaving('null')}" 
                                 process="loanAutodebSaving @this" update="loanAutodebSavingOwn" oncomplete="focusState(xhr, status, args);"/>
                
                <p:toolbar>
                    <p:toolbarGroup align="left">
                        <p:commandButton value="#{bundle.btnNew}" icon="ui-icon-document"
                                         action="#{loanBean.newData()}" process="@this" update="displayLoan, btnSaveLoan" 
                                         widgetVar="btnNewLoan" oncomplete="setDoInitForm(false);"
                                         rendered="#{menuBean.cekButtonAccess(301,'INS;')}" >
                            <pe:resetEditableValues for="displayLoan"/>  
                        </p:commandButton>
                        <p:commandButton value="#{bundle.btnSave}" icon="ui-icon-disk" id="btnSaveLoan"
                                         action="#{loanBean.trySave()}"  disabled="#{!loanBean.editMode}"
                                         update="displayLoan, @this" 
                                         rendered="#{menuBean.cekButtonAccess(301,'INS;')}"
                                         oncomplete="setDoInitForm(true); handleCompleteSaving(xhr, status, args);">
                        </p:commandButton> 
                        
                        <p:commandButton value="#{bundle.btnEdit}" icon="ui-icon-pencil" id="btnEditLoan"
                                         action="#{loanBean.showDialog('dlgLoanLookupLoan')}" process="@this" immediate="true" 
                                         update=":#{utilityBean.findClientId('displayLoanLookupLoan')}" 
                                         rendered="#{menuBean.cekButtonAccess(301,'UPD;')}" 
                                         oncomplete="setDoInitForm(false);" >
                            <f:setPropertyActionListener target="#{loanBean.showLookup}" value="#{true}" />
                        </p:commandButton> 
                        
                    </p:toolbarGroup>
                    
                    <p:toolbarGroup align="right">
                        <p:commandButton id="doNothingLoan" type="button" value="" style="width: 0px; height: 0px;"/> 
                         <p:defaultCommand target="doNothingLoan"/> 
                    </p:toolbarGroup>
                </p:toolbar>

                <h:panelGrid id="displayLoan" styleClass="addELIT" cellpadding="0" border="0" >
                    <h:panelGrid columns="2" columnClasses="panelGridId,panelGridId" cellpadding="0" cellspacing="2">
                        <p:panel header="#{bundle.loanLedgend}">
                            <h:panelGrid columns="3" cellpadding="0" cellspacing="5">
                                <p:outputLabel value= "#{bundle.cif}" for="loanCIF"/><h:outputLabel value= " : " />
                                <h:panelGrid columns="3" cellpadding="0" cellspacing="0">
                                    <p:inputText value="#{loanBean.loan.customer.cif}" style="width: 225px;"
                                            onkeydown="customRK(event, 'loanCIF', '#{utilityBean.findClientId('loanLoanProdId')}')" id="loanCIF" label="#{bundle.cif}"
                                            requiredMessage="#{bundle.cif} #{bundle.requiredInput}"
                                            required="true" disabled="#{!loanBean.editMode}">
                                    </p:inputText>
                                    <p:commandButton icon="ui-icon-search" iconPos="center" styleClass="btnSmall"
                                            update=":#{utilityBean.findClientId('displayLoanLookup')}" onclick="changeFocus('#{utilityBean.findClientId('loanLoanProdId')}');"
                                            process="@this" immediate="true" 
                                            action="#{loanBean.showDialog('dlgLoanLookupCust')}"
                                            disabled="#{!loanBean.editMode}">
                                        <f:setPropertyActionListener target="#{loanBean.showLookup}" value="#{true}" />
                                    </p:commandButton>
                                </h:panelGrid>
                                  
                                <p:outputLabel value= "#{bundle.loanprod}" for="loanLoanProdId" /><h:outputLabel value= " : " />
                                <p:selectOneMenu value="#{loanBean.loan.loanprod.loanprodId}" id="loanLoanProdId" label="#{bundle.loanprod}" 
                                            requiredMessage="#{bundle.loanprod} #{bundle.requiredInput}" 
                                            required="true" style="width: 258px;" disabled="#{!loanBean.editMode}">
                                    <f:selectItem itemLabel="" itemValue="" />
                                    <f:selectItems value="#{loanBean.avaibleProduct}" />
                                    <p:ajax update="loanInterestRate loanLoanNo loanSpkNo" listener="#{loanBean.handleProdChange}" />  
                                </p:selectOneMenu>

                                <h:outputLabel value= "#{bundle.loanDate}" /><h:outputLabel value= " : " />
                                <h:outputText value="#{loanBean.loan.loanDate}" />

                                <h:outputLabel value= "#{bundle.loanNo}" /><h:outputLabel value= " : " />
                                <p:inputText value="#{loanBean.loan.loanNo}" id="loanLoanNo" style="width: 250px;" disabled="#{!loanBean.editMode}" />
                                
                                <h:outputLabel value= "#{bundle.spkNo}" /><h:outputLabel value= " : " />
                                <p:inputText value="#{loanBean.loan.spkNo}" id="loanSpkNo" style="width: 250px;" disabled="#{!loanBean.editMode}" />

                                <p:outputLabel value= "#{bundle.loanAmount}" for="loanPrincipalAmount" /><h:outputLabel value= " : " />
                                <pe:inputNumber decimalSeparator="." thousandSeparator="," maxValue="99999999999999999999.99" minValue="0" 
                                        styleClass="money" value="#{loanBean.loan.principalAmount}" style="width: 250px; text-align: right;"
                                        requiredMessage="#{bundle.loanAmount} #{bundle.requiredInput}" 
                                        required="true" id="loanPrincipalAmount" disabled="#{!loanBean.editMode}">
                                        <p:ajax event="blur" update="loanInterestRate" listener="#{loanBean.getInterestRate}" process="@this" partialSubmit="false"/>
                                </pe:inputNumber>
                                
                                <h:outputLabel value= "#{bundle.interestRate}" for="loanInterestRate"/><h:outputLabel value= " : " />
                                <pe:inputNumber decimalSeparator="." thousandSeparator="," maxValue="999.99" minValue="0" symbol=" %" symbolPosition="s"
                                        styleClass="percent" value="#{loanBean.loan.interestRate}" style="width: 250px;text-align: right;" disabled="#{!loanBean.editMode}"
                                        required="true" requiredMessage="#{bundle.interestRate} #{bundle.requiredInput}" id="loanInterestRate" >
                                </pe:inputNumber>
                                
                                <h:outputLabel value= "#{bundle.interestType}" /><h:outputLabel value= " : " />
                                <p:selectOneMenu value="#{loanBean.loan.interestType}" style="width: 258px" disabled="#{!loanBean.editMode}">
                                    <f:selectItem itemValue="F" itemLabel="#{bundle.interestTypeFlat}"/>
                                    <f:selectItem itemValue="E" itemLabel="#{bundle.interestTypeEffective}"/>
                                </p:selectOneMenu>
                                                               
                                <h:outputLabel value= "#{bundle.disbSaving}" /><h:outputLabel value=":"/>
                                <h:panelGrid columns="2" cellpadding="0" cellspacing="0">                                
                                    <p:inputText value="#{loanBean.disbAccnt}" style="width: 225px;"
                                        onkeydown="customRK(event, 'loanDisbSaving', '#{utilityBean.findClientId('loanAutodebSaving')}')" 
                                        label="#{bundle.disbSaving}" 
                                        id="loanDisbSaving" disabled="#{!loanBean.editMode}"
                                        requiredMessage="#{bundle.disbSaving} #{bundle.requiredInput}">
                                        <p:ajax update="loanDisbSavingOwn" process="@this"  />
                                    </p:inputText>
                                    
                                    <p:commandButton icon="ui-icon-search" iconPos="center" styleClass="btnSmall"
                                                     update=":#{utilityBean.findClientId('displayLoanLookupSav')}" onclick="changeFocus('#{utilityBean.findClientId('loanAutodebSaving')}');"
                                        process="@this" immediate="true" oncomplete="dlgLoanLookupSav.show();" disabled="#{!loanBean.editMode}">
                                        <f:setPropertyActionListener target="#{loanBean.showLookup}" value="#{true}" />
                                    </p:commandButton>
                                </h:panelGrid>
                                
                                <h:outputLabel value= "#{bundle.ownerAccnt}" /><h:outputLabel value= " : " />
                                <h:outputText value= "#{loanBean.disbAccntOwner}" id="loanDisbSavingOwn" />
                                
                                <h:outputLabel value= "#{bundle.autodebSaving}" /><h:outputLabel value=":"/>
                                <h:panelGrid columns="2" cellpadding="0" cellspacing="0">                                
                                    <p:inputText value="#{loanBean.autodebitAccnt}" style="width: 225px;"
                                        onkeydown="customRK(event, 'loanAutodebSaving', '#{utilityBean.findClientId('loanDisbDate')}')" 
                                        label="#{bundle.autodebSaving}" 
                                        id="loanAutodebSaving" disabled="#{!loanBean.editMode}"
                                        requiredMessage="#{bundle.autodebSaving} #{bundle.requiredInput}">
                                        <p:ajax update="loanAutodebSavingOwn" process="@this"  />
                                    </p:inputText>
                                    
                                    <p:commandButton icon="ui-icon-search" iconPos="center" styleClass="btnSmall"
                                                     update=":#{utilityBean.findClientId('displayLoanLookupAutodebSav')}" onclick="changeFocus('#{utilityBean.findClientId('loanDisbDate')}');"
                                        process="@this" immediate="true" oncomplete="dlgLoanLookupAutodebSav.show();" disabled="#{!loanBean.editMode}">
                                        <f:setPropertyActionListener target="#{loanBean.showLookup}" value="#{true}" />
                                    </p:commandButton>
                                </h:panelGrid>
                                
                                <h:outputLabel value= "#{bundle.ownerAccnt}" /><h:outputLabel value= " : " />
                                <h:outputText value= "#{loanBean.autodebitAccntOwner}" id="loanAutodebSavingOwn" />
                                
                                <h:outputLabel value= "#{bundle.disbursementDate}" /><h:outputLabel value= " : " />
                                <p:calendar value="#{loanBean.loan.disbursementDate}" pattern="dd/MM/yyyy" id="loanDisbDate"
                                            size="8" navigator="true" showOn="button" disabled="#{!loanBean.editMode}">
                                    <p:ajax event="dateSelect" update="loanDuedate" listener="#{loanBean.handleDisbDateSelect}" />  
                                </p:calendar>
                                
                                <h:outputLabel value= "#{bundle.period}" /><h:outputLabel value= " : " />
                                <pe:inputNumber decimalSeparator="." thousandSeparator="," maxValue="1000" minValue="0" 
                                        symbol=" Bulan" symbolPosition="s"
                                        styleClass="money" value="#{loanBean.loan.period}" style="width: 250px; text-align: right;"
                                        disabled="#{!loanBean.editMode}">
                                    <p:ajax update="loanDuedate" listener="#{loanBean.handlePeriod}" process="@this" partialSubmit="false"/>
                                </pe:inputNumber>
                                
                                <h:outputLabel value= "#{bundle.dueDate}" /><h:outputLabel value= " : " />
                                <h:outputText value="#{loanBean.loan.dueDate}" id="loanDuedate" />
                               
                                <h:outputLabel value= "#{bundle.paypoint}" /><h:outputLabel value= " : " />
                                <p:selectOneMenu value="#{loanBean.loan.paypoint}" id="loanPaypoint" label="#{bundle.paypoint}" 
                                            requiredMessage="#{bundle.paypoint} #{bundle.requiredInput}" 
                                            required="true" style="width: 258px;" disabled="#{!loanBean.editMode}" var="p" converter="paypoint" >
                                    <f:selectItem rendered="#{loanBean.loan.paypoint!=null}" itemLabel="#{loanBean.loan.paypoint.paypointName}" itemValue="#{loanBean.loan.paypoint}" />
                                    <f:selectItems value="#{loanBean.avblPoint}" var="point" itemLabel="#{point.paypointName}" itemValue="#{point}" />
                                    <p:column>#{p.paypointNo}</p:column>
                                    <p:column>#{p.paypointName}</p:column>
                                </p:selectOneMenu>
                                
                                <h:outputLabel value= "#{bundle.marketing}" /><h:outputLabel value= " : " />
                                <p:selectOneMenu value="#{loanBean.loan.marketingId}" id="loanMarketing" label="#{bundle.marketing}" 
                                            requiredMessage="#{bundle.marketing} #{bundle.requiredInput}" 
                                            required="false" style="width: 258px;" disabled="#{!loanBean.editMode}">
                                        <f:selectItem itemLabel="" itemValue="-1" />
                                        <f:selectItems value="#{loanBean.avblMarketing}" />
                                </p:selectOneMenu>
                            </h:panelGrid>
                             
                            <!-- validasi id's -->
                            <h:panelGrid>
                                <h:inputHidden value="#{loanBean.loan.customer.customerId}" required="true" id="loancustIdHidden"
                                    requiredMessage="#{bundle.cif} #{loanBean.loan.customer.cif} #{bundle.dataNotFound}" />
                            </h:panelGrid>     
                            
                            <p:panel>
                                <pe:masterDetail id="loanCostMD" selectLevelListener="#{selectLevelListener.handleNavigation}" style="width: 650px;" >
                                    <pe:masterDetailLevel level="1" levelLabel="#{bundle.loanfee}" >
                                        <p:dataTable id="dtloanfees" var="fee" value="#{loanBean.loan.loancosts}" >
                                                
                                            <p:column style="width:auto;">
                                                <f:facet name="header">#{bundle.fee}</f:facet>
                                                <h:outputText value="#{loanBean.selectItemValueOf(loanBean.availableFee, fee.feeId)}" />
                                            </p:column>
                                            <p:column style="width: 50px;">
                                                <f:facet name="header">#{bundle.feepc}</f:facet>
                                                <h:outputLabel value="#{fee.feePc}" styleClass="numPos" >
                                                    <f:convertNumber groupingUsed="true" />
                                                </h:outputLabel>
                                            </p:column>

                                            <p:column style="width: 80px;">
                                                <f:facet name="header">#{bundle.amount}</f:facet>
                                                <h:outputLabel value="#{fee.feeAmount}" styleClass="numPos" >
                                                    <f:convertNumber groupingUsed="true" />
                                                </h:outputLabel>
                                            </p:column>
                                        
                                            <p:column style="width:90px">
                                                <f:facet name="header">Actions</f:facet>
                                                <p:commandLink value="Add" actionListener="#{loanBean.newCost()}" disabled="#{!loanBean.editMode}">
                                                    <pe:selectDetailLevel contextValue="#{null}" preserveInputs="false" />
                                                </p:commandLink><p:spacer width="3"/>
                                                <p:commandLink value="Edit" actionListener="#{loanBean.editCost(fee)}" disabled="#{fee.feeId==null or loanBean.editMode==false}">
                                                    <pe:selectDetailLevel contextValue="#{fee}" preserveInputs="false"/>
                                                </p:commandLink><p:spacer width="3"/>
                                                <p:commandLink value="Del" actionListener="#{loanBean.handleRemoveCost()}" 
                                                               update="dtloanfees" disabled="#{fee.feeId==null  or loanBean.editMode==false}">
                                                    <p:collector value="#{fee}" removeFrom="#{loanBean.loan.loancosts}" />  
                                                </p:commandLink>
                                            </p:column>
                                        </p:dataTable>
                                    </pe:masterDetailLevel>

                                    <pe:masterDetailLevel level="2" levelLabel="Add/edit" contextVar="fee" >
                                        <h:panelGrid id="frmLoancost" border="0" cellpadding="0" cellspacing="0" >
                                            <h:panelGrid columns="2" columnClasses="panelGridId,panelGridId" cellpadding="0" cellspacing="5">
                                                <p:panel header="#{bundle.fee}" >
                                                    <h:panelGrid columns="3" border="0" cellpadding="0" cellspacing="3" >
                                                        <h:outputLabel value= "#{bundle.fee}" /><h:outputLabel value=":"/>
                                                        <p:selectOneMenu value="#{loanBean.feeId}" style="width: 160px;" 
                                                                         id="loanfeeId1" required="false" label="#{bundle.fee}"
                                                                    requiredMessage="#{bundle.fee} #{bundle.requiredInput}">
                                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.fee}" />
                                                            <f:selectItems value="#{loanBean.availableFee}" />
                                                        </p:selectOneMenu>

                                                        <p:outputLabel value= "#{bundle.feepc}" for="loanfeepc"/><h:outputLabel value=":"/>
                                                        <pe:inputNumber decimalSeparator="." thousandSeparator="," maxValue="999.99" minValue="0" 
                                                                            styleClass="money" value="#{loanBean.unsaveCost.feePc}" style="width: 158px;text-align: right;"
                                                                            id="loanfeepc" required="true" label="#{bundle.feepc}"
                                                                    requiredMessage="#{bundle.feepc} #{bundle.requiredInput}">
                                                                <p:ajax update="loanfeeAmount" process="@this" listener="#{loanBean.calcFeeAmount()}" partialSubmit="false" /> 
                                                        </pe:inputNumber>
                                                        
                                                        <p:outputLabel value= "#{bundle.amount}" for="loanfeeAmount" /><h:outputLabel value=":"/>
                                                        <pe:inputNumber decimalSeparator="." thousandSeparator="," maxValue="99999999999.99" minValue="0" 
                                                                            styleClass="money" value="#{loanBean.unsaveCost.feeAmount}" style="width: 158px;text-align: right;"
                                                                            id="loanfeeAmount" required="true" label="#{bundle.amount}"
                                                                    requiredMessage="#{bundle.amount} #{bundle.requiredInput}">
                                                            <p:ajax update="loanfeepc" process="@this" listener="#{loanBean.calcFeepc()}" partialSubmit="false" /> 
                                                        </pe:inputNumber>
                                                    </h:panelGrid>
                                                </p:panel>
                                            </h:panelGrid>
                                        </h:panelGrid>

                                        <h:panelGrid cellpadding="0" cellspacing="0" border="0" > 
                                            <f:facet name="footer">  
                                                <p:commandButton value="Back" icon="ui-icon ui-icon-arrowthick-1-w" process="@this" >
                                                        <pe:resetEditableValues for="frmLoancost"/>  
                                                        <pe:selectDetailLevel step="-1"/>
                                            </p:commandButton>

                                                <p:commandButton value="#{bundle.btnSave}" icon="ui-icon-disk" actionListener="#{loanBean.saveCost()}"/>

                                            <p:commandButton value="#{bundle.btnNew}" icon="ui-icon-document" process="@this" update="frmLoancost"
                                                             actionListener="#{loanBean.newCost()}" >
                                                        <pe:resetEditableValues for="frmLoancost"/>  
                                            </p:commandButton>  
                                            </f:facet>
                                        </h:panelGrid>
                                    </pe:masterDetailLevel>
                                </pe:masterDetail>
                            </p:panel> 
                        
                            <!-- ============================================-->
                            <p:panel>
                                <pe:masterDetail id="loanprodrateMD1" selectLevelListener="#{selectLevelListener.handleNavigation}" style="width: 650px;" >
                                    <pe:masterDetailLevel level="1" levelLabel="#{bundle.loancoral}" >
                                        <p:dataTable id="dtloanLoanCorals" var="coral" value="#{loanBean.loan.loancorals}" >
                                            <p:column style="width:16px">  
                                                <p:rowToggler />  
                                            </p:column>  

                                            <p:column style="width:auto;">
                                                <f:facet name="header">#{bundle.collateral}</f:facet>
                                                <h:outputText value="#{loanBean.selectItemValueOf(loanBean.avaibleCoral, coral.collateralId)}" />
                                            </p:column>
                                            <p:column style="width: 80px;">
                                                    <f:facet name="header">#{bundle.bookValue}</f:facet>
                                                        <h:outputLabel value="#{coral.bookValue}" styleClass="numPos" >
                                                                <f:convertNumber groupingUsed="true" />
                                                        </h:outputLabel>
                                            </p:column>
                                            <p:column style="width:80px">
                                                    <f:facet name="header">#{bundle.documentNo}</f:facet>
                                                    <h:outputText value="#{coral.documentNo}" />
                                            </p:column>
                                            <p:column style="width:50px">
                                                    <f:facet name="header">#{bundle.documentDate}</f:facet>
                                                    <h:outputText value="#{coral.documentDate}" />
                                            </p:column>
                                            <p:column style="width:90px">
                                                <f:facet name="header">Actions</f:facet>
                                                <p:commandLink value="Add" actionListener="#{loanBean.newDetail()}" disabled="#{!loanBean.editMode}">
                                                            <pe:selectDetailLevel contextValue="#{null}" preserveInputs="false" />
                                                </p:commandLink><p:spacer width="3"/>
                                                <p:commandLink value="Edit" actionListener="#{loanBean.editDetail(coral)}" disabled="#{coral.collateralId==null or loanBean.editMode==false}">
                                                            <pe:selectDetailLevel contextValue="#{coral}" preserveInputs="false"/>
                                                </p:commandLink><p:spacer width="3"/>
                                                <p:commandLink value="Del" actionListener="#{loanBean.handleRemoveDetail}" 
                                                                   update="dtloanLoanCorals" disabled="#{coral.collateralId==null or loanBean.editMode==false}">
                                                            <p:collector value="#{coral}" removeFrom="#{loanBean.loan.loancorals}" />  
                                                </p:commandLink>
                                            </p:column>
                                                
                                            <p:rowExpansion>  
                                                    <p:dataList value="#{coral.loanCoralAtrribs}" var="atrb" itemType="disc">  
                                                        #{atrb.coralAttrib.attributeName} : #{atrb.attributValue}  
                                                    </p:dataList> 
                                                    
                                            </p:rowExpansion>  
                                                
                                        </p:dataTable>
                                    </pe:masterDetailLevel>

                                    <pe:masterDetailLevel level="2" levelLabel="Add/edit" contextVar="coral" >
                                        <h:panelGrid id="frmLoancoral" border="0" cellpadding="0" cellspacing="0" >
                                            <h:panelGrid columns="2" columnClasses="panelGridId,panelGridId" cellpadding="0" cellspacing="5">
                                                <p:panel header="#{bundle.collateral}" >
                                                    <h:panelGrid columns="3" border="0" cellpadding="0" cellspacing="3" >
                                                        <h:outputLabel value= "#{bundle.collateral}" /><h:outputLabel value=":"/>
                                                        <p:selectOneMenu value="#{loanBean.colateralId}" style="width: 160px;" 
                                                                         id="loanColateralId1" required="false" label="#{bundle.collateral}"
                                                                    requiredMessage="#{bundle.collateral} #{bundle.requiredInput}">
                                                            <f:selectItem itemLabel="#{bundle.Select} #{bundle.collateral}" />
                                                            <f:selectItems value="#{loanBean.avaibleCoral}" />
                                                            <p:ajax update="dtLoanCoralAttribs" listener="#{loanBean.handleCoralChange()}" />      
                                                        </p:selectOneMenu>

                                                        <p:outputLabel value= "#{bundle.bookValue}" for="loanbookValue"/><h:outputLabel value=":"/>
                                                        <pe:inputNumber decimalSeparator="." thousandSeparator="," maxValue="99999999999999999999.99" minValue="0" 
                                                                styleClass="money" value="#{loanBean.unsaveCoral.bookValue}" style="width: 158px;text-align: right;"
                                                                    id="loanbookValue" required="true" label="#{bundle.bookValue}"
                                                                    requiredMessage="#{bundle.bookValue} #{bundle.requiredInput}">
                                                        </pe:inputNumber>

                                                        <p:outputLabel value= "#{bundle.documentNo}" for="loandocumentNo"/><h:outputLabel value=":"/>
                                                        <p:inputText value="#{loanBean.unsaveCoral.documentNo}" style="width: 158px;"
                                                                    id="loandocumentNo" required="true" label="#{bundle.documentNo}"
                                                                    requiredMessage="#{bundle.documentNo} #{bundle.requiredInput}" />

                                                        <h:outputLabel value= "#{bundle.documentDate}" for="loandocumentDate"/><h:outputLabel value=":"/>
                                                        <p:calendar value="#{loanBean.unsaveCoral.documentDate}" 
                                                                    id="loandocumentDate" required="true" label="#{bundle.documentDate}" showOn="button"
                                                                    requiredMessage="#{bundle.documentDate} #{bundle.requiredInput}" pattern="dd/MM/yyyy">
                                                        </p:calendar>
                                                    </h:panelGrid>
                                                </p:panel>
                                                
                                                <p:panel header="#{bundle.coralAttrib}">
                                                    <h:panelGrid columns="3" border="0" cellpadding="0" cellspacing="3" >
                                                        <p:dataTable id="dtLoanCoralAttribs" value="#{loanBean.unsaveCoral.loanCoralAtrribs}" var="coralAtrb" editable="true"
                                                                     rendered="#{loanBean.unsaveCoral.loanCoralAtrribs != null}" >
                                                        
                                                            <p:column style="width: 100px;">
                                                                <f:facet name="header">#{bundle.attributeName}</f:facet>
                                                                <h:outputLabel value="#{coralAtrb.coralAttrib.attributeName}" />
                                                            </p:column>
                                                            
                                                            <p:column style="width: 200px;" headerText="#{bundle.attributeValue}">
                                                                <p:cellEditor>  
                                                                    <f:facet name="output">
                                                                        <h:outputLabel value="#{coralAtrb.attributValue}" />
                                                                    </f:facet>

                                                                    <f:facet name="input">
                                                                        <p:inputText value="#{coralAtrb.attributValue}" style="width:100%"/>
                                                                    </f:facet>
                                                                </p:cellEditor>
                                                            </p:column>
                                                            
                                                            <p:column headerText="Act" style="width:60px">  
                                                                <p:rowEditor />  
                                                            </p:column>  
                                                            
                                                        </p:dataTable>
                                                    </h:panelGrid>
                                                </p:panel>
                                            </h:panelGrid>
                                        </h:panelGrid>

                                        <h:panelGrid cellpadding="0" cellspacing="0" border="0" > 
                                            <f:facet name="footer">  
                                                <p:commandButton value="Back" icon="ui-icon ui-icon-arrowthick-1-w" process="@this" >
                                                        <pe:resetEditableValues for="frmLoancoral"/>  
                                                        <pe:selectDetailLevel step="-1"/>
                                            </p:commandButton>

                                            <p:commandButton value="#{bundle.btnSave}" icon="ui-icon-disk" actionListener="#{loanBean.saveDetail()}"/>

                                            <p:commandButton value="#{bundle.btnNew}" icon="ui-icon-document" process="@this" update="frmLoancoral"
                                                             actionListener="#{loanBean.newDetail()}" >
                                                        <pe:resetEditableValues for="frmLoancoral"/>  
                                            </p:commandButton>  
                                            </f:facet>
                                        </h:panelGrid>
                                    </pe:masterDetailLevel>
                                </pe:masterDetail>
                            </p:panel> 
                        </p:panel>  
                        
                        <h:panelGrid columns="1" cellpadding="0" cellspacing="0" rowClasses="panelGridId" border="0" >
                            <p:panel header="#{bundle.cusledgen}" id="loanCustInfo">
                                <p:outputPanel autoUpdate="true">
                                    <h:panelGrid columns="3" style="width:100%;" cellpadding="0" cellspacing="5">

                                    <h:outputLabel value= "#{bundle.globalName}" /><h:outputLabel value= " : " />
                                    <h:outputText style="padding: 0 75px 0 0;"  value="#{loanBean.loan.customer.customerName}" />
                                    
                                    <h:outputLabel value= "#{bundle.aliasName}" /><h:outputLabel value= " : " />
                                    <h:outputText rendered="true" value="#{loanBean.loan.customer.aliasName}" />
                                    
                                    <h:outputLabel value= "#{bundle.phone}" /><h:outputLabel value= " : " />
                                    <h:outputText value="#{loanBean.loan.customer.phone}"/> 
                                    
                                    <h:outputLabel value= "#{bundle.mobilePhone}" /><h:outputLabel value= " : " />
                                    <h:outputText value="#{loanBean.loan.customer.mobilePhone}"/>
                                    
                                    <h:outputLabel style="padding: 0 15px 0 0;"  value= "#{bundle.npwp}" /><h:outputLabel value= " : " />
                                    <h:outputText value="#{loanBean.loan.customer.npwp}" />
                                    
                                    <h:outputLabel style="padding: 0 15px 0 0;"  value= "#{bundle.addressRes}" /><h:outputLabel value= " : " />
                                    <h:outputText value="#{loanBean.loan.customer.idAddressLine1}" />
                                    
                                    <h:outputLabel value= "#{bundle.specimen}" /><h:outputLabel value=":"/>
                                    <p:graphicImage  value="/upload/personal/#{loanBean.loan.customer.specimen}" />
                                    
                                </h:panelGrid>
                                </p:outputPanel>
                            </p:panel>
                            
                            <p:panel header="#{bundle.loanprodLedgend}" id="loanLoanprodInfo">
                                <p:outputPanel autoUpdate="true">
                                    <h:panelGrid columns="3" cellpadding="0" cellspacing="5">
                                        <h:outputLabel style="padding: 0 15px 0 0;" value= "#{bundle.gpInslateDays}" /><h:outputLabel value= " : " />
                                        <h:outputText rendered="true" value="#{loanBean.loan.loanprod.gpInslateDays}" />

                                        <h:outputLabel value= "#{bundle.penaltyInslateRate}" /><h:outputLabel value= " : " />
                                        <h:outputText rendered="true" value="#{loanBean.loan.loanprod.penaltyInslateRate}" />

                                        <h:outputLabel value= "#{bundle.interestType}" /><h:outputLabel value= " : " />
                                        <h:outputText rendered="true" value="#{constantaBean.getInterestTypeText(loanBean.loan.loanprod.interestType)}" />

                                        <h:outputLabel value= "#{bundle.closingPenaltyRate}" /><h:outputLabel value= " : " />
                                        <h:outputText rendered="true" value="#{loanBean.loan.loanprod.closingPenaltyRate}" />
                                    </h:panelGrid>
                                </p:outputPanel>        
                            </p:panel>
                        </h:panelGrid>
                    </h:panelGrid>    
                </h:panelGrid>
                                   
            </h:form>
            
            <!-- LOOK UP CUSTOMER -->
                <p:dialog header="#{bundle.Select} #{bundle.customer}" widgetVar="dlgLoanLookupCust" 
                          modal="true" appendToBody="true" closable="true" dynamic="true" >
                 
                    <p:ajax listener="#{loanBean.handleCloseLookup}" />
                    <h:form>
                    <h:panelGrid id="displayLoanLookup" rendered="#{loanBean.showLookup==true}" >

                            <ui:include src="../master/customer/searchCustomer.xhtml" >
                                <ui:param name="lookupCustComponenId" value="loan" />
                            </ui:include> 
                        
                        <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR" >
                            <f:facet name="footer">
                                <p:commandButton value="#{bundle.btnOK}" icon="ui-icon-disk" immediate="true" 
                                                process="@this" update=":#{utilityBean.findClientId('loanCIF')}, :#{utilityBean.findClientId('loancustIdHidden')}"
                                                action="#{loanBean.getLoanCustomer(searchCustomer.selectedData.cif)}" 
                                                oncomplete="dlgLoanLookupCust.hide(); focusState(xhr, status, args);" />

                                <p:commandButton value="#{bundle.btnClose}" 
                                                 oncomplete="dlgLoanLookupCust.hide()" 
                                                 immediate="true" icon="ui-icon-document" process="@this" />
                            </f:facet>
                        </h:panelGrid>
                    </h:panelGrid>    
                    </h:form>
                </p:dialog>
                
                <!-- pencairan tabungan-->
                <p:dialog header="#{bundle.Select} #{bundle.accountNo}" widgetVar="dlgLoanLookupSav" 
                          modal="true" appendToBody="true" closable="true" dynamic="true" >
                    <p:ajax listener="#{loanBean.handleCloseLookup}" />
                    <h:form>
                    <h:panelGrid id="displayLoanLookupSav" rendered="#{loanBean.showLookup==true}">
                        <ui:include src="../saving/searchSaving.xhtml" >
                            <ui:param name="lookupSavComponenId" value="loan" />
                        </ui:include> 

                        <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR" >
                            <f:facet name="footer">
                                <p:commandButton value="#{bundle.btnOK}" icon="ui-icon-disk" immediate="true" 
                                                process="@this" update=":#{utilityBean.findClientId('loanDisbSaving')}, :#{utilityBean.findClientId('loanDisbSavingOwn')}"
                                                action="#{loanBean.getDisbSaving(searchSavingBean.selectedData.accountNo)}" 
                                                oncomplete="dlgLoanLookupSav.hide(); focusState(xhr, status, args);" />

                                <p:commandButton value="#{bundle.btnClose}" oncomplete="dlgLoanLookupSav.hide();" immediate="true" icon="ui-icon-document" process="@this" />
                            </f:facet>
                        </h:panelGrid>
                    </h:panelGrid>
                    </h:form>
                </p:dialog>
                
                <!-- autodebit tabungan-->
                <p:dialog header="#{bundle.Select} #{bundle.accountNo}" widgetVar="dlgLoanLookupAutodebSav" closable="true" dynamic="true" 
                          modal="true" appendToBody="true" >
                    <p:ajax listener="#{loanBean.handleCloseLookup}" />
                    <h:form>
                    <h:panelGrid id="displayLoanLookupAutodebSav" rendered="#{loanBean.showLookup==true}">
                        <ui:include src="../saving/searchSaving.xhtml" >
                            <ui:param name="lookupSavComponenId" value="loan2" />
                        </ui:include> 

                        <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR" >
                            <f:facet name="footer">
                                <p:commandButton value="#{bundle.btnOK}" icon="ui-icon-disk" immediate="true" 
                                                process="@this" update=":#{utilityBean.findClientId('loanAutodebSaving')}, :#{utilityBean.findClientId('loanAutodebSavingOwn')}"
                                                action="#{loanBean.getAutodebitSaving(searchSavingBean.selectedData.accountNo)}" 
                                                oncomplete="dlgLoanLookupAutodebSav.hide(); focusState(xhr, status, args);" />

                                <p:commandButton value="#{bundle.btnClose}" oncomplete="dlgLoanLookupAutodebSav.hide();" immediate="true" icon="ui-icon-document" process="@this" />
                            </f:facet>
                        </h:panelGrid>
                    </h:panelGrid>
                    </h:form>
                </p:dialog>
                
                <!--                 edit simpanan-->
                <p:dialog header="#{bundle.Select} #{bundle.loanNo}" widgetVar="dlgLoanLookupLoan" closable="true" dynamic="true" modal="true" appendToBody="true" >
                    <p:ajax listener="#{loanBean.handleCloseLookup}" />
                    <h:form>
                    <h:panelGrid id="displayLoanLookupLoan" rendered="#{loanBean.showLookup==true}">
                        <ui:include src="../loan/searchLoan.xhtml" >
                            <ui:param name="lookupLoanComponenId" value="editLoan" />
                            <ui:param name="loanApprovalUid" value="#{0}" />
                        </ui:include> 

                        <h:panelGrid cellpadding="0" styleClass="pComBtnSTDR" >
                            <f:facet name="footer">
                                <p:commandButton value="#{bundle.btnOK}" icon="ui-icon-disk" immediate="true" 
                                                process="@this" update=":#{utilityBean.findClientId('displayLoan')} :#{utilityBean.findClientId('btnSaveLoan')}"
                                                action="#{loanBean.editData(searchLoanBean.selectedData.loanId)}" 
                                                oncomplete="dlgLoanLookupLoan.hide();" />

                                <p:commandButton value="#{bundle.btnClose}" oncomplete="dlgLoanLookupLoan.hide();" immediate="true" icon="ui-icon-document" process="@this" />
                            </f:facet>
                        </h:panelGrid>
                    </h:panelGrid>
                    </h:form>
                </p:dialog>
                
        </ui:composition>
    </h:body>
</html>